<template>
	<div class="startbigbox">
		<div class="startTopbox">
			<div class="topbox">
				<p>{{hour}}:{{minute}}</p>
				<p>
					📶🛜🔋
				</p>
			</div>
			<button @click="handleClickLogin()">跳过{{time}}</button>
		</div>
		<div class="content">
			<div class="contentTop">
				<image src="../../static/nvdoctor.png" class="image1" />
				<image src="../../static/aixin.png" class="image2" />
				<image src="../../static/nandoctor.png" class="image1" />
			</div>
			<div class="content_text">
				三省医生在线问诊
			</div>
		</div>
		<div class="bottom">
			<image src="../../static/电流.png" class="image3" />
			<div>
				<p class="bottom_text1">小宇诊所</p>
				<p class="bottom_text2">您身边的健康管理专家</p>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		ref,
		onMounted,
		onBeforeUnmount,
	} from 'vue';
	import {useRouter} from "vue-router"
	export default {
		setup() {
			const router = useRouter()
			const time = ref(3)
			const data_time = new Date()
			const hour = data_time.getHours()
			const minute = data_time.getMinutes()
			console.log("当前时间为" + data_time)
			console.log("当前小时为" + hour)
			console.log("当前分钟为" + minute)
			const handleClickLogin =()=>{
				console.log('这是去登录')
				router.push('/pages/login/login')
			}
			let countdownInterval = null;
			const startCountdown =()=>{
				countdownInterval = setInterval(()=>{
					if(time.value > 0){
						time.value--
						console.log(time.value)
					}else{
						clearInterval(countdownInterval)
						router.push('/pages/login/login')
					}
				},1000)
			}
			const stopCountdown =()=>{
				if(countdownInterval){
					clearInterval(countdownInterval)
				}
			}
			


			onMounted(()=>{
				startCountdown()
			})
			onBeforeUnmount(()=>{
				stopCountdown()
			})
			return {
				time,
				hour,
				minute,
				handleClickLogin
			}
		}

	}
</script>
<style scoped>
	.startbigbox {
		width: 100%;
		height: 100vh;
		/* background-color: aqua; */
	}

	.startTopbox {
		width: 100%;
		height: 80px;
		/* background: orangered; */
		position: relative;
	}

	.startTopbox button {
		width: 75px;
		height: 32px;
		font-size: 14px;
		text-align: center;
		line-height: 32px;
		background-color: #797979;
		color: white;
		position: absolute;
		right: 30px;
		bottom: 13px;

	}

	.topbox {
		width: 100%;
		height: 44px;
		display: flex;
		justify-content: space-between;
	}

	.content {
		width: 100%;
		height: 350px;
		/* background-color: red; */
		margin-top: 10px;
		text-align: center;
	}
	.contentTop{
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	.image1 {
		width: 118px;
		height: 298px;
	}

	.image2 {
		width: 86px;
		height: 84px;
	}
	.content_text{
		width:160px;
		height: 23px;
		font-size: 20px;
		color: #7F7F7F;
		margin: 0 auto;
		margin-top: 20px;
		font-weight: bold;

	}
	.bottom{
		width: 100%;
		height:400px;
		/* background-color: aqua; */
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.image3{
		width: 52px;
		height: 49px;
	}
	.bottom_text1{
		font-size: 25px;
		font-weight: bold;
		color: #333333;
	}
	.bottom_text2{
		font-size: 12px;
		color: #AAAAAA;
	}
</style>